<template>
  <div class="ek-pagination">
    <el-pagination
      v-model:current-page="ekCurrentPage"
      v-model:page-size="ekPageSize"
      :small="false"
      :background="true"
      layout="prev, pager, next, sizes, jumper, ->, total"
      :total="total"
      :size="size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  computed
} from "vue";
const props = defineProps({
  // 当前页
  currentPage: {
    type: Number,
    default: 1,
  },
  // 每页显示条数
  pageSize: {
    type: Number,
    default: 10,
  },
  // 总条数
  total: {
    type: Number,
    default: 0,
  },
  size: {
    type: String,
    default: 'default'
  }

});
const emit = defineEmits(['update:currentPage','update:pageSize', 'size-change', 'current-change'])

/* 当前页面 */
const ekCurrentPage = computed({
  get() {
    return props.currentPage
  },
  set(value) {
    emit('update:currentPage', value)
  }
})
// 修改当前页回调
function handleCurrentChange(event) {
  emit('current-change', event)
}
/* 当前页面结束 */

/* 每页显示数量 */
const ekPageSize = computed({
  get() {
    return props.pageSize
  },
  set(value) {
    emit('update:pageSize', value)
  }
})
// 修改每页显示数量回调
function handleSizeChange(event) {
  emit('size-change', event)
}
/* 每页显示数量结束 */

</script>

<style scoped lang="scss">

</style>
